
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册</title>
    
    
     
    
    <script type="text/javascript" src="/static/js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="/static/js/personal-re.js"></script>
    <script type="text/javascript" src="/static/js/slide.js"></script>
    <!-- 小图标 -->
    <link rel="shortcut icon"  href="/static/img/shortcut icon.jpg">
    <!-- html页面整体基础样式统一 -->
    <link rel="stylesheet" href="/static/css/base.css">
    <!-- 主体部分 -->
    <link rel="stylesheet" href="/static/css/personal-re.css">
    <!-- bottom部分 -->
    <link rel="stylesheet" href="/static/css/other.css">
    <link rel="stylesheet" href="/static/css/slide.css">
</head>
<body> 
    <div id="M">
        <div id="welcome-register">
            <a href="" class="welcome-logo"><img src="/static/img/ppx-logo1.png" alt=""></a>
        </div>
        <!-- 第一层(包含68px外边) -->
        <div class="register-con">
            <!-- 左侧主体 -->
            <div class="left">
                <p id="loginin">
                    我已经注册，现在就<a href="https://www.jd.com" id="logina" target="_blank">登录</a>
                </p>
                <!-- 选择个人注册[后再做] -->
                <div class="reg-person">
                    <p class="pc1" id="pc1">
                        <a href="" class="person-company2" id="pc3">个人用户注册</a>
                    </p>
                    <p class="pc1" id="pc2">
                        <a href="" class="person-company2" id="pc4">企业用户注册</a>
                    </p>
                </div>
                <!-- 表单主体部分 -->
                <form action="/personal-re.html" class="form-con" name="registerForm" method="POST">
                    <!-- 注册用户名 -->
                    <div class="reg-box">
                        <span class="reg-lable">用户名：</span>
                        <input type="text" maxlength="20" minlength="4" class="reg-input" name="username" id="username">

                        <label class="name_tip" id="tip_1">
                            4-20个字符,支持汉字、字母、数字及'-'、'_'组合
                        </label>
                        <label class="name_tip" id="tip_2">
                            请输入用户名
                        </label>
                        <label class="name_tip" id="tip_3">
                            用户名长度只能在4-20个字符之间
                        </label>
                        <label class="name_tip" id="tip_4">
                            不能是纯数字,请重新输入
                        </label>
                        <label class="name_tip" id="tip_5">
                            该用户名已存在,请重新输入
                        </label>
                        <label class="name_tip" id="tip_6">
                            恭喜！该用户名可以使用
                        </label>
    
                    </div>

                    <!-- 注册密码 -->
                    <div class="reg-box">
                        <span class="reg-lable">设置密码：</span>
                        <input type="password" class="reg-input" name="passwd" id="passwd">
                        <label class="pwd_tip" id="stip_1">
                            6-20个字符,建议由字母、数字及符号两种以上组成
                        </label>
                        <label class="pwd_tip" id="stip_2">
                            请输入密码
                        </label>
                        <label class="pwd_tip" id="stip_3">
                            长度应为6-20个字符
                        </label>
                        <label class="pwd_tip" id="stip_4">
                            <img src="/static/img/dagou.png" alt="">
                        </label>
                    </div>
                    <!-- 确认密码 -->
                    <div class="reg-box">
                        <span class="reg-lable">确认密码：</span>
                        <input type="password" class="reg-input" name="confirm-passwd" id="confirmpw">
                        <label class="repwd_tip" id="restip_1">
                            请再次输入密码
                        </label>
                        <label class="repwd_tip" id="restip_2">
                            两次输入的密码不一致
                        </label>
                        <label class="repwd_tip" id="restip_3">
                            <img src="/static/img/dagou.png" alt="">
                        </label>
                    </div>

                    <!-- 交易密码 -->
                    <div class="reg-box">
                        <span class="reg-lable">交易密码：</span>
                        <input type="password" class="reg-input" name="trans-pwd" id="transpwd">
                        <label class="jypwd_tip" id="jytip_1">
                            请输入6位数交易密码
                        </label>
                        <label class="jypwd_tip" id="jytip_2">
                            交易密码格式有误,请输入6位纯数字
                        </label>
                        <label class="jypwd_tip" id="jytip_3">
                            <!-- 格式正确,密码可以使用 -->
                            <img src="/static/img/dagou.png" alt="">
                        </label>
                    </div>

                    <!-- 手机号码 -->
                    <div class="reg-box">
                        <span class="reg-lable">手机号码：</span>
                        <input type="text" class="reg-input" name="phonenum" id="phonenumber">
                        <label class="phone_tip" id="phtip_1">
                            手机号码不能为空
                        </label>
                        <label class="phone_tip" id="phtip_2">
                            手机号码格式有误,请重新输入
                        </label>
                        <label class="phone_tip" id="phtip_3">
                            该号码已注册,请重新输入
                        </label>
                        <label class="phone_tip" id="phtip_4">
                            恭喜! 该号码可以使用
                        </label>
                    </div>

                    <!-- 滑动验证 -->
                    <div class="reg-box">
                        <span class="reg-lable">滑动验证：</span>
                        <div id="wrapper" >
                            <div id="drag">
                                <div class="drag_bg"></div>
                                <div class="drag_text slidetounlock" onselectstart="return false;" unselectable="on">
                                    请按住滑块，拖动到最右边
                                </div>
                                <div class="handler handler_bg" id="slide-block"> >>> </div>
                            </div>
                        </div>
                        
                            <!--<a href="#" class="img"><img src="img/Lighthouse.jpg"/></a>-->
                        <script>
                            $('#drag').drag();
                        </script>
                    </div>
                    <!-- 短信验证 -->
                    <div class="reg-box">
                        <span class="reg-lable">短信验证：</span>
                        <input type="text" class="reg-input" name="message" id="message">
                    </div>
                    <div class="reg-box" class="submit">
                        <input type="submit" name="submit" value="立即注册" id="submit">
                    </div>
                    
                </form>
                <button class="get-message" id="btnYZM">获取验证码</button>
            </div>
            <!-- 右侧主体 -->
            <div class="right"></div>
        </div>
        <div class="other">
            这里放其他东西
        </div>
    </div>
</body>
</html>